<template>
	<view class="container">
		<view class="header">
			<view class="mask"></view>
			<image class="h-img" v-if="delList.length>0" :lazy-load="true" :lazy-load-margin="0" mode="widthFix"
				:src="`${app.imgUrl}${delList[2]}`"></image>
			<button class="share" open-type="share">
				<!-- <image class="share-img" mode="widthFix" src="/static/image/icon_share.png"></image> -->
			</button>
		</view>
		<view class="title">{{delList[1]}}</view>
		<view class="small-img">
			<view class="small-cont" v-for="(item,index) in smallPicList" :key="index">
				<image class="small-pic" :lazy-load="true" :lazy-load-margin="0" mode="scaleToFill" :src="`${app.imgUrl}${item}`">
				</image>
			</view>
		</view>
		<view class="big-img">
			<image class="big-pic" v-for="(item,index) in picList" :key="index" :lazy-load="true" mode="scaleToFill"
				:src="`${app.imgUrl}${item}`"></image>
		</view>
		<view class="bot">

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs
	} from 'vue'
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'
	const data = reactive({
		delList: [],
		picList: [],
		smallPicList: []
	})

	const {
		delList,
		picList,
		smallPicList
	} = toRefs(data)
	const app = getApp().globalData.utils
	onLoad((option) => {
		delList.value = JSON.parse(decodeURIComponent(option.del))
		console.log(`/pages/product/detail?del=${encodeURIComponent(JSON.stringify(delList.value))}`)
		getTabList(delList.value[0])
	})
	onShareAppMessage((res) => {
		return {
			title: '产品详情',
			path: `/pages/product/detail?del=${encodeURIComponent(JSON.stringify(delList.value))}`
		}
	})
	onShareTimeline((res) => {
		return {
			title: '产品详情',
			path: `/pages/product/detail?del=${encodeURIComponent(JSON.stringify(delList.value))}`
		}
	})
	const getTabList = async (id) => {
		const res = await app.getProductDetail({
			topicId: id
		})
		if (res.length >= 2) {
			smallPicList.value = [res[0], res[1]]
		}
		picList.value = res
	}
</script>

<style>
	.header {
		width: 100%;
		height: 350rpx;
		overflow: hidden;
		position: relative;
	}

	.mask {
		width: 100%;
		height: 350rpx;
		position: absolute;
		background-color: rgba(00, 00, 00, 0.6);
		z-index: 100;
	}

	.h-img {
		width: 100%;
		margin-top: -50rpx;
	}

	.share {
		width: 60rpx;
		height: 60rpx;
		border: none;
		border-radius: 50%;
		background-image: url('/static/image/icon_share.png');
		background-size: 80% 80%;
		background-repeat: no-repeat;
		background-position: center center;
		background-color: rgba(255, 255, 255, 0.6);
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		line-height: 60rpx;
		position: absolute;
		top: 40rpx;
		right: 50rpx;
		z-index: 101;
	}

	.share-img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	.title {
		margin: 20rpx;
		font-size: 40rpx;
	}

	.small-img {
		width: 100%;
		box-sizing: border-box;
		padding: 15rpx;
		display: flex;
	}

	.small-cont {
		width: 50%;
		box-sizing: border-box;
		padding: 15rpx;
		position: relative;
		height: 240rpx;
	}

	.small-pic {
		width: 100%;
		height: 210rpx;
	}

	.big-img {
		width: 100%;
		padding: 25rpx;
		box-sizing: border-box;
	}

	.big-pic {
		width: 100%;
	}

	.bot {
		width: 100%;
		height: 80rpx;
	}
</style>